import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  //商品列表数据
	  shoplist: [
		  { 'id': 1, 'title': '电水壶', 'price': 50.01, src: '/images/1.jpg' },
		  { 'id': 2, 'title': '电压力锅', 'price': 260.99, src: '/images/2.jpg' },
		  { 'id': 3, 'title': '电饭煲', 'price': 200.99, src: '/images/3.jpg' },
		  { 'id': 4, 'title': '电磁炉', 'price': 300.99, src: '/images/4.jpg' },
		  { 'id': 5, 'title': '微波炉', 'price': 400.99, src: '/images/5.jpg' },
		  { 'id': 6, 'title': '电饼铛', 'price': 200.99, src: '/images/6.jpg' },
		  { 'id': 7, 'title': '豆浆机', 'price': 199.99, src: '/images/7.jpg' },
		  { 'id': 8, 'title': '多用途锅', 'price': 510.99, src: '/images/8.jpg' }
		],
	  //购物车数据
	  shopcart: []
  },
  //getters可以认为是store的计算属性，可以对state里面的数据进行计算或过滤
  getters: {
	  //计算总价
	  totalPrice(state){ //getter接收state作为第一个参数
	  	return state.shopcart.reduce(function(total,item){
	  		return total += item.price * item.num;
	  	},0)
	  }
  },
  //mutations类似于事件，用来更改store的状态（就是state里面的数据），简单理解就是如果需要对数据进行修改，就把这些修改的方法放到mutations里面
  mutations: {
	  //添加购物车
	  add(state,item){ //mutation会接受state作为第一个参数
		  var first = state.shopcart.find(i => i.id == item.id) //查找shopcart里面是否已有添加的这项
		  if(first){ //如果有将对应的这一项数量加1
			  first.num++;
		  }else{ //如果没有，获取item里的数据重新组装（主要是加了num这个属性），push到shopcart
			  state.shopcart.push({
			  			  id: item.id,
			  			  title: item.title,
			  			  price: item.price,
			  			  src: item.src,
			  			  num: 1
			  });
		  }
	  },
	  //删除购物车
	  del(state,item){
		  //使用forEach遍历shopcart，找到对应的item，使用splice()方法删除shopcart中对应的项
		  state.shopcart.forEach(function(i,index,arr){
			  if(i.id == item.id){
				  arr.splice(index,1);
			  }
		  })
	  }
  },
  actions: {
  },
  modules: {
  }
})
